<template>
  <div class="user-page">
    <div class="more">
      <div class="infobox">
        <div class="bt">
          <img
            :src="
              'http://q2.qlogo.cn/headimg_dl?dst_uin=' +
              user.qqNum +
              '&spec=100'
            "
            alt="头像"
          />
        </div>
        <div class="bb">
          <div class="infos">
            <div class="lable">UID:</div>
            <div class="value">{{ user.uid }}</div>
          </div>
          <div class="infos">
            <div class="lable">积分：</div>
            <div class="value">{{ user.score }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="more">
      <p class="bb">更多操作</p>
      <van-row>
        <van-col span="6">
          <qm-icon class="aicon" name="icon-fashuoshuo"></qm-icon>用户反馈
        </van-col>
        <van-col span="6" @click="out">
          <qm-icon class="aicon" name="icon-icon"></qm-icon>退出登录
        </van-col>
        <van-col span="6"> </van-col>
        <van-col span="6"> </van-col>
      </van-row>
    </div>
  </div>
</template>

<script>
import qmIcon from '@/components/qm-icon.vue'
import users from '@/api/user'
export default {
  name: 'UserPage',
  data() {
    return {
      user: {}
    }
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  async mounted() {
    const res = await users.info()
    this.user = res.data
  },
  components: { qmIcon },
  methods: {
    out() {
      this.$store.dispatch('clearLogin')
      window.location.href = '/login'
    }
  }
}
</script>
<style scoped lang="less">
@keyframes light {
  0% {
    box-shadow: 0 0 4px #f00;
  }
  25% {
    box-shadow: 0 0 16px #0f0;
  }
  50% {
    box-shadow: 0 0 4px #00f;
  }
  75% {
    box-shadow: 0 0 16px #0f0;
  }
  100% {
    box-shadow: 0 0 4px #f00;
  }
}

.more {
  margin: 0 10px;
  background-color: #fff;
  border-radius: @radius;
  margin-bottom: 20px;
  p {
    font-size: 16px;
    padding: 10px 15px;
    margin: 0;
    border-bottom: 1px solid #00000014;
  }
  .van-row {
    padding: 15px 0;
    font-size: 12px;
    text-align: center;
    .van-col {
      display: flex;
      justify-content: center;
      align-items: center;
      .geek-icon {
        width: 20px;
        height: 20px;
        margin-right: 2px;
      }
    }
  }

  .infobox {
    padding: 10px 0px;
    display: flex;
    align-items: center;
    padding: 20px 15px;
    .bt {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-right: 20px;

      img {
        width: 60px;
        height: 60px;
        border-radius: 5px;
        animation: light 4s ease-in-out infinite;
        transition: 0.5s;
      }
    }
    .bb {
      display: flex;
      flex-direction: column;
      font-weight: 500;

      .infos {
        font-size: 16px;
        display: flex;
        align-items: center;

        .lable {
          font-size: 16px;
          width: 50px;
        }

        .value {
          font-size: 16px;
        }
      }

      .infos + .infos {
        margin-top: 8px;
      }
    }
  }
}
</style>
